import React, { useEffect, useState } from 'react'
import { Slider, Image, Spin, Button } from 'antd';
import styles from '../index.css';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'

import { connect } from 'dva';
const theProps = (state) => {
    return {
        resImageUrl: state.maps?.mapsInfo[0]?.mapsRes1[0]?.path,
        taskStatus: state.task.taskStatus,
        loading: state.task.loading,
        mapsId: state.maps.mapsId
    }
}

function Preview(props) {
    const [imageCount, setImageCount] = useState(0);
    const [row, setRow] = useState(0);
    const [col, setCol] = useState(0);
    const { dispatch, resImageUrl, taskStatus, taskId, loading, mapsId } = props;
    const onChange = () => {
        // shale_porosity/data/Maps/gapClassification/2708c103-fee5-4aa2-8e57-82236620857e
    }

    const imageAdd = () => {
        // let row = Math.floor(Math.random()*80 + 1);
        // let col = Math.floor(Math.random()*80 + 1);
        const imageCountTemp = imageCount + 1
        setImageCount(imageCountTemp);
        setRow(parseInt((imageCountTemp / 50) % 50))
        setCol(imageCountTemp % 50);
        console.log('add', parseInt((imageCountTemp / 50) % 50), imageCountTemp % 50);
    }

    const imageSubtract = () => {
        // let row = Math.floor(Math.random()*80 + 1);
        // let col = Math.floor(Math.random()*80 + 1);
        if (imageCount === 0) {
            return;
        }
        const imageCountTemp = imageCount - 1
        setImageCount(imageCountTemp);
        setRow(parseInt((imageCountTemp / 50) % 50))
        setCol(imageCountTemp % 50)
        console.log('sub', parseInt((imageCountTemp / 50) % 50), imageCountTemp % 50);
    }

    useEffect(() => {
        // setTimeout("test()","2000"); 
        console.log('pre statues', resImageUrl)
        console.log('pre status', resImageUrl?.slice(14));
        dispatch({
            type: 'maps/getInfo',
            payload: mapsId
        })
        console.log('usestatus');
        return () => {
        }
    }, [dispatch, loading, mapsId, resImageUrl]);

    return (
        <>
            <div style={{ textAlign: 'center' }}><Spin spinning={loading} tip="图片处理中..." /></div>
            <div className={styles.previewImage}>
                <CaretLeftOutlined style={{ marginTop: '3em', fontSize: '2em' }} onClick={() => imageSubtract()} />
                <Image
                    width='40vw'
                    height='50vh'
                    src={`http://10.89.101.39:9000${resImageUrl?.slice(14)}/17/${row}_${col}.jpg`}
                    fallback='../../../../assets/download.png'
                    placeholder={
                        <Image
                            preview={false}
                            src={`http://10.89.101.39:9000${resImageUrl?.slice(14)}/17/${row}_${col}.jpg`}
                            width='40vw'
                            height='50vh'
                            fallback='../../../../assets/download.png'
                        />
                    }
                />
                <CaretRightOutlined style={{ marginTop: '3em', fontSize: '2em' }} onClick={() => imageAdd()} />
            </div>
        </>
    )
}

export default connect(theProps, null)(Preview)